<template>
  <div id="permission">
    <div class="permission-main">
      <div class="title">
        <HomeTitle title="授权审核" Eng="Permissions"></HomeTitle>
      </div>
      <div class="content">
        <div>
          <span>审核状态：<el-select size="small" v-model="params.Allowed" placeholder="请选择" @change="changeStatus">
              <el-option label="待审核" value="9"></el-option>
              <el-option label="通过" value="1"></el-option>
              <el-option label="未通过" value="0"></el-option>
            </el-select></span>
        </div>
        <myLoading v-if="loading"></myLoading>
        <el-table v-else :data="permission.list" header-cell-class-name="tableColor" cell-class-name="tableColor">
          <el-table-column type="index" :index="calcIndex" label="序号" width="80"></el-table-column>
          <el-table-column label="申请日期" prop="ApplyDatetime" width="180">
            <template #default="s">
              {{ moment(s.ApplyDatetime).format("YYYY-MM-DD HH:mm:ss") }}
            </template>
          </el-table-column>
          <el-table-column label="申请理由" prop="ApplyReason"></el-table-column>
          <el-table-column label="作者" prop="ToUserName"></el-table-column>
          <el-table-column label="电话" prop="ToUserPhone"></el-table-column>
          <el-table-column label="邮箱" prop="ToUserEmail"></el-table-column>
          <el-table-column label="状态" width="100">
            <template #default="s"> <el-tag :type="s.row.Allowed == 1 ? 'success' : 'danger'">{{ getStatus(s.row.Allowed)
            }}</el-tag> </template>
          </el-table-column>
          <el-table-column label="审核图片">
            <template #default="s">
              <div style="
                  display: flex;
                  align-items: center;
                 
                ">
                <el-image z-index="9999" preview-teleported style=" width: 150px;
                  height: 150px;" v-for="(v, k) in s.row.ApplyPictureList" :key="k" :src="baseApi + v.WatermarkFileUrl"
                  :preview-src-list="[baseApi + v.WatermarkFileUrl]" />
              </div>
            </template>
          </el-table-column>
          <el-table-column label="下载" align="center" fixed="right" width="100">
            <template #default="s">
              <el-button icon="download" circle @click="downLoad(s.row)"></el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footer">
        <el-pagination v-model:currentPage="params.PageIndex" :page-size="params.PageSize" :small="true"
          :background="true" layout="prev, pager, next" :total="permission.count" @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<script>
import { getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs } from "vue";
import { useRoute, useRouter } from "vue-router";
import HomeTitle from "@/components/title.vue";
import * as PermissionApi from "@/api/permission";
import { storeUser } from '@/store/user'
import moment from 'moment'
import { ElNotification } from 'element-plus';
export default {
  name: "",
  components: {
    HomeTitle,
  },
  setup(props, ctx) {
    const loading = ref(false);
    const user = storeUser()
    const permission = reactive({
      list: [],
      count: 0,
    });
    const params = reactive({
      CurrentAccount: user.UserAccount,
      Allowed: '',
      PageSize: 5,
      PageIndex: 1,
    });
    const init = async () => {
      loading.value = true;
      let { data } = await PermissionApi.getList(params);
      loading.value = false;
      permission.list = data.UserData.applylist;
      permission.count = data.UserData.Count;
    };
    onMounted(() => {
      init();
    });
    const calcIndex = (index) => {
      return (params.PageIndex - 1) * params.PageSize + index + 1;
    };
    const handleCurrentChange = (v) => {
      params.PageIndex = v;
      init();
    };
    const changeStatus = (v) => {
      init()
    }
    const getStatus = (v) => {
      if (v == 9) {
        return '待审核'
      } else if (v == 1) {
        return '已通过'
      } else if (v == 0) {
        return '未通过'
      }
    }
    const { baseApi } = getCurrentInstance().appContext.config.globalProperties;
    const downLoad = (row) => {
      if (row.Allowed == 1) {
        if (row.ApplyPictureList.length == 0) {
          ElNotification({
            type: 'error',
            title: '提示',
            message: '图片不存在！'
          })
          return
        }
        const url = baseApi + row.ApplyPictureList[0].ThumbnailsFileUrl
        window.open(url)
      } else {
        ElNotification({
          type: 'error',
          title: '提示',
          message: '等待授权中...'
        })
      }
    }
    return {
      calcIndex,
      handleCurrentChange,
      permission,
      loading,
      params,
      moment,
      changeStatus,
      getStatus,
      downLoad
    };
  },
};
</script>

<style scoped lang="scss">
::v-deep(.el-table) {
  background: transparent !important;
  color: #fff !important;
}

::v-deep(.el-table tr) {
  background: transparent !important;
  color: #fff !important;
}

::v-deep(.el-input__wrapper) {
  background: transparent !important;
  color: #fff !important;
}

::v-deep(.el-table__cell) {
  background: transparent !important;
  color: #fff !important;
}

#permission {
  position: relative;
  width: 100%;
  height: 100%;
  border-top-left-radius: 30px;
  overflow-y: auto;
  background: var(--box-bg-color);

  .permission-main {
    width: 100%;
    padding: 30px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;

    .content {
      margin-top: 20px;
      flex: 1;
      overflow: hidden;
      display: flex;
      flex-direction: column;

      .el-table {
        flex: 1;
      }
    }

    .footer {
      margin-top: 20px;
      // text-align: right;
      align-self: flex-end;
    }
  }
}
</style>
